<template>
    <div>
        <!-- 
            注意点：
            1.当父组件给子组件传值的时候，如果传递的值是字符串可以使用如下格式
            msg="from Parent message",如果需要传递变量就使用:msg="'from Parent message'"
            子组件给父组件传值可以使用事件，子组件中定义事件，在父组件中触发就可也拿到子组件传递过来的数据了
            2.第二种父子组件传值方法是 使用 this.$parent / this.$children方法可以拿到想要的数据和触发需要触发的方法
            3.第三种方法是使用 ref 
            4.使用事件总线方法传递数据
            5.使用$attrs、$listeners 方法在非父子组件之间传值
        -->
        <h1>Parent</h1>
        <m-child @showMsg="showMsg" msg="msg" ref="child" v-bind="$attrs"></m-child>
        <h3>{{msg}}</h3>
        <h5> vuex <span style="color:red;">{{count}}</span></h5>
        <h5> getters <span style="color:red;">{{doubleCount}}</span></h5>
        <button @click="add">增加</button>
    </div>
</template>

<script>
import MChild from './Child.vue'
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
export default {
    components: {
        MChild,
    },
    // computed: {
    //     count() {
    //         return this.$store.state.count; 
    //     }
    // },
    computed: {
        ...mapState({
            // count:'count'
            count:state=>state.text.count // 使用模块化后这里调用方法发生了改变
        }),
        // doubleCount(){
        //     return this.$store.getters.doubleCount
        // }
        // 注意点：在使用mapGetters时候如果使用的名称和store中getters中定义的一样可以使用数组 里面是字符串方式
        ...mapGetters([
            'doubleCount'
        ])
    },
    data() {
        return {
            msg: '',
            parentMsg:'Parent'
        }
    },
    mounted () {
        // console.log(this.$children);
        // console.log(this.$children[0].passMsg());
        // console.log('ref ',this.$refs.child);
    },
    methods: {
        showMsg(val) {
            this.msg=val
        },
        parentMethod(){
            // console.log('this is parent methods');
        },
        // add(){
        //     // this.$store.commit('add')
        //     this.$store.dispatch('delayAdd')
        // }
        // ...mapMutations({
        //     add:'add'
        // })
        ...mapActions({
            add:'delayAdd'
        })
    },
}
</script>

<style scoped>

</style>